<template>
  <div class="limit-list-main base-main">
    <img class="banner w100" src="../../assets/img/img_limit_banner.png" alt="" />

    <div class="div-content pr">
      <div class="list-box pr bgcFFF">
        <van-tabs v-model="active" @click="getNavActive" >
          <van-tab v-for="item in tabs" :key="item.txt" :title="item.txt" >
              <div class="limit-product">
                <ul>
                  <li
                    v-for="(item, index) in productList"
                    :key="index"
                    @click="getItem(item)"
                    class="product-box inline-block">
                    <div class="product-content fs11">
                      <img class="product-img" :src="item.pict_url" alt="">
                      <p class="product-name color45454D fs14 clamp1">{{item.title}}</p>
                      <p class=" color7A7B82">2小时销量 <span class="colorFA6F60">{{item.txt}}</span>笔</p>
                      <p>
                        <span class="coupon inline-block colorF54E4E " v-if="item.youhui">{{item.youhui}}</span>
                        <span class="txt-placeholder" v-else>占位符</span>
                      </p>
                      <p class="coupon-amount fs13 color666">
                        券后
                        <i class="fs12 colorF54E4E">￥</i>
                        <span class="pr fs16 colorF54E4E">{{item.coupon_amount | decimals}}</span>
                      </p>
                      <p class="shop-name ">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icontmall"></use>
                        </svg>
                        {{item.shopName}}
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        active: 0,
        tabs: [
          {
            txt: '推荐'
          },
          {
            txt: '热销'
          },
          {
            txt: '大额券'
          },
          {
            txt: '所有商品'
          }
        ], //tab标签
        type: 0, // 类型
        productList: [
          {
            id: 1,
            pict_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1893845300,2594389931&fm=173&app=49&f=JPEG?w=312&h=208&s=262A9C090AEB24846810FD810100E0A0',
            title: '商品名称',
            txt: '6423',
            youhui: '每400减80',
            coupon_amount: '1590.00',
            shopName: '索弗官方旗舰店'
          },
          {
            id: 2,
            pict_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1893845300,2594389931&fm=173&app=49&f=JPEG?w=312&h=208&s=262A9C090AEB24846810FD810100E0A0',
            title: '商品名称',
            txt: '1324',
            youhui: '',
            coupon_amount: '1590.00',
            shopName: '索弗官方旗舰店'
          },
          {
            id: 3,
            pict_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1893845300,2594389931&fm=173&app=49&f=JPEG?w=312&h=208&s=262A9C090AEB24846810FD810100E0A0',
            title: '商品名称',
            txt: '1111',
            youhui: '每400减80',
            coupon_amount: '1590.00',
            shopName: '索弗官方旗舰店'
          },
          {
            id: 4,
            pict_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1893845300,2594389931&fm=173&app=49&f=JPEG?w=312&h=208&s=262A9C090AEB24846810FD810100E0A0',
            title: '商品名称',
            txt: '7867',
            youhui: '每400减80',
            coupon_amount: '1590.00',
            shopName: '索弗官方旗舰店'
          },
          {
            id: 3,
            pict_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1893845300,2594389931&fm=173&app=49&f=JPEG?w=312&h=208&s=262A9C090AEB24846810FD810100E0A0',
            title: '商品名称',
            txt: '1111',
            youhui: '每400减80',
            coupon_amount: '1590.00',
            shopName: '索弗官方旗舰店'
          },
          {
            id: 4,
            pict_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1893845300,2594389931&fm=173&app=49&f=JPEG?w=312&h=208&s=262A9C090AEB24846810FD810100E0A0',
            title: '商品名称',
            txt: '7867',
            youhui: '每400减80',
            coupon_amount: '1590.00',
            shopName: '索弗官方旗舰店'
          },
        ],
        page: 1,
        isPost: false, //是否请求中
      }
    },
    created() {
      this.$nextTick(() => {
        $('.product-img').height($('.product-img').width())
      })
    },
    filters: {
      decimals(value){
        return Number(value).toFixed(2)
      },
    },
    mounted(){
      $('.van-tabs__content').scroll(() => {
        let scrollTopH = $('.van-tabs__content').scrollTop() // 滚动条高度
        let offsetH = $('.van-tabs__content').height() // 容器高度
        let Height = $('.limit-product').height() // 内容高度
        if(scrollTopH + offsetH >= Height - 10) {
          console.log('加载更多');
          this.page++
          this.productList = this.productList.concat(this.productList)
        }
      })
    },
    methods: {
      // 点击tab
      getNavActive(index) {
        this.type = index !== 3 ? index + 1 : ''
        console.log(index, this.type);
      },
      getItem(getItem) {
        console.log('getItem-- ',getItem);
//        this.$router.push({
//          name:'limitProductDetail',
//          query:{
//            id:item.item_id, // 商品id
//            coupon_price: item.coupon_amount, // 优惠券面值
//            coupon_end_time: item.coupon_end_time, // 优惠券结束时间
//            coupon_start_time: item.coupon_start_time, // 优惠券开始时间
//            tpwd: item.tpwd  // 淘宝口令
//          }
//        })
      },
    },
  }
</script>

<style lang="scss">
@import "../../assets/css/limitProductList.scss";
</style>
